<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<script src="js/jquery-1.4.2.min.js"></script>
		<script src="js/jquery.min.js"></script>

		<style>
			body,
			html {
				/*text-align: center;*/
			}
			
			#editDiv {
				width: 90%;
				display: inline-block;
				height: 350px;
				background: #fff;
				border-radius: 10px;
				line-height: 20px;
				padding: 10px;
				font-size: 14px;
				color: #666;
				resize: none;
				outline: none;
				overflow-y: scroll;
			}
			
			#editDiv {
				border: 1px solid #333;
				border-color: rgba(169, 169, 169, 1);
				text-align: left;
			}
			

		</style>
	</head>

	<body>

<h1>Ctrl+V 粘贴图片</h1>

		<div id="editDiv" contenteditable="true"></div>

		<!---->
		<input id="add" type="button" value="添加" />
		<!---->

	</body>

	<script>
		var data;
		var aaaaa = 123;
		document.querySelector('#editDiv').addEventListener('paste', function(e) {
			var cbd = e.clipboardData;
			var ua = window.navigator.userAgent;
			// 如果是 Safari 直接 return
			if(!(e.clipboardData && e.clipboardData.items)) {
				return;
			}
			// Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
			if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
				cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
				ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
				return;
			}

			for(var i = 0; i < cbd.items.length; i++) {
				var item = cbd.items[i];
				if(item.kind == "file") {
					var blob = item.getAsFile();
					data = blob;

					//					if(blob.size === 0) {
					//						return;
					//					}

					// blob 就是从剪切板获得的文件 可以进行上传或其他操作
					/*-----------------------与后台进行交互 start-----------------------*/
					/*var data = new FormData();
					data.append('discoverPics', blob);
					$.ajax({
					    url: '/discover/addDiscoverPicjson.htm',
					    type: 'POST',
					    cache: false,
					    data: data,
					    processData: false,
					    contentType: false,
					    success:function(res){
					    	var obj = JSON.parse(res);
					    	var wrap = $('#editDiv');
						    var file = obj.data.toString();
						    var img = document.createElement("img");
					        img.src = file;
							wrap.appendChild(img);
					    },error:function(){
					    	
					    }
					})*/
					/*-----------------------与后台进行交互 end-----------------------*/
					/*-----------------------不与后台进行交互 直接预览start-----------------------*/
					var reader = new FileReader();
					var imgs = new Image();
					imgs.file = blob;
					reader.onload = (function(aImg) {
						return function(e) {
							aImg.src = e.target.result;
						};
					})(imgs);
					reader.readAsDataURL(blob);
					document.querySelector('#editDiv').appendChild(imgs);
					/*-----------------------不与后台进行交互 直接预览end-----------------------*/
				}
			}
		}, false);
		
		
		//捕捉粘贴的图片 
		$("#add").bind("click", function() {

			//			var content = "123123"
			var fileName = 'vvvvvvvvvvvvvvvvvvv.png'
			var aLink = document.createElement('a');
			var blob = new Blob([data]);
			var evt = document.createEvent("HTMLEvents");
			evt.initEvent("click", false, false);
			aLink.download = fileName;
			aLink.href = URL.createObjectURL(blob);
			aLink.dispatchEvent(evt);
			aLink.click();
		})
	</script>

</html>